import React from 'react';
import { connect } from 'dva';
// import _ from 'lodash';
import { Table } from 'antd';
import QueryBar from '../../../components/searchBar';
import { jump } from '../../../utils';
import common from '../common.less';

function Cards({ cards, dispatch }) {
    const { data, storeId, pagination } = cards;
    const gotoDetail = (ids) => {
        jump(dispatch, '/financial/card', ids);
    };
    const columns = [
        {
            title: '玩家',
            dataIndex: 'userName',
            key: 'userName',
        },
        {
            title: '累计充值(元)',
            dataIndex: 'total',
            key: 'total',
        },
        {
            title: '累计赠值(元)',
            dataIndex: 'sendMoney',
            key: 'sendMoney',
        },
        {
            title: '余额(元)',
            dataIndex: 'balance',
            key: 'balance',
        },
        {
            title: '操作',
            key: 'opts',
            render: (t, { storeId, userId }) => {
                return (
                    <div>
                        <a onClick={gotoDetail.bind(null, { storeId, userId })}>明细</a>
                    </div>
                );
            },
        },
    ];
    const reSearch = (query) => {
        dispatch({
            type: 'cards/reSearch',
            query,
        });
    };
    const onChange = (page, pageSize) => {
        dispatch({
            type: 'cards/load',
            payload: {
                page,
                pageSize,
            },
        });
    };
    return (
        <div className={common.normalWrap}>
            <div className={common.search}>
                <QueryBar
                    config={[
                        'timeRange',
                        {
                            fdKey: 'userName',
                            label: '玩家',
                            placeholder: '请输入玩家姓名关键字',
                        },
                    ]}
                    initFd={{storeId}}
                    onSubmit={reSearch}
                />
            </div>
            <div className={common.table}>
                <Table
                    rowKey="userId"
                    columns={columns}
                    dataSource={data}
                    pagination={{ ...pagination, onChange }}
                />
            </div>
        </div>
    );
}

function mapStateToProps({ cards }) {
    return { cards };
}

export default connect(mapStateToProps)(Cards);
